<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS固定定位</title>
    <style>
        .fixed {
            background-color: red;
            width: 100px;
            height: 100px;
            position: fixed;
            right: 10px;
            bottom: 20px;
        }

        .test {
            width: 1000px;
            height: 700px;
            background-color: gray;
        }
    </style>
    <!--
    如何设置固定定位:
    1.给元素设置position:fixed,即可实现固定定位:漂浮出来,但是不占用空间,随着窗口变化位置
    2.可以使用left,right,top,bottom四个属性调整位置

    固定定位的参考点在哪里?
    1.参考他的视口
    也就是我们看网页的窗户

    固定定位元素的特点:
    1.脱离文档流,会对后面的兄弟元素,父元素有影响
    2.left和right不能同时设置,top和bottom也不能同时设置
    3.固定定位和浮动不能同时设置,如果同时设置,浮动失效
    4.固定定位也可以通过margin调整位置,但不推荐这样做
    5.无论是什么元素,设置为固定定位之后都变成定位元素,可以使用width和height来设置宽高

    固定定位也成为绝对定位
    -->
</head>
<body>
<div class="test"></div>
<div class="fixed">小哥哥,快来聊天吧!</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis et eum eveniet fugit numquam sequi suscipit
    veritatis voluptas voluptates? Aperiam commodi consequatur dolor doloremque doloribus eos expedita explicabo hic id
    magni minima modi molestiae molestias nesciunt nobis non numquam obcaecati odio officia omnis optio quam quasi quia
    quis quisquam rerum, tempora unde veniam veritatis vero vitae voluptate voluptatem voluptatibus. Atque deleniti
    distinctio excepturi minima quidem, rem saepe sint unde velit. Cumque dolor eius eum quidem quo rerum voluptatem.
    Amet consequuntur magnam magni molestias, mollitia nostrum perspiciatis veritatis. Aliquam illum minima omnis optio
    reprehenderit. Corporis ea eos facilis itaque molestias perferendis quaerat quia tempore? Aliquam aliquid, beatae
    dolor eos illo molestias quam sint vero. Animi est et quia vel. Accusantium ad aliquid atque autem dolorum eos
    eveniet expedita facere magni maiores minus natus, non nulla odio quae quia quos reprehenderit suscipit totam ullam.
    Doloremque ducimus illum, in modi provident qui reiciendis rem temporibus. A ab aliquid animi asperiores autem
    consequuntur dicta dolorem ea earum eveniet expedita iusto laboriosam minima nemo numquam officia omnis possimus,
    quae quaerat quasi quibusdam quidem quos repudiandae soluta sunt suscipit temporibus voluptatem. Consectetur quis
    repellendus similique? Ad adipisci, aliquid amet atque corporis doloribus eligendi enim, eveniet excepturi facere,
    magni pariatur quae quam quisquam sequi! Amet at consequatur dolore dolorum expedita facere fugiat inventore ipsam
    mollitia, nobis perferendis quidem quis saepe sunt suscipit temporibus voluptates! Deleniti dolor harum ipsam magnam
    molestias perspiciatis quasi, quo veritatis? Ab facere id magni natus nemo nesciunt nihil obcaecati veritatis
    voluptas. Alias, culpa, laudantium? Consectetur debitis distinctio dolor eius enim esse exercitationem explicabo
    incidunt maiores nam nobis officiis, omnis optio placeat porro possimus qui sapiente vero vitae voluptas! Amet atque
    consectetur consequatur culpa cum cumque deserunt doloremque ex facere, iure laboriosam laborum nostrum omnis
    praesentium quam quisquam recusandae reprehenderit rerum tempore, ut veniam voluptatem voluptatibus! Ab adipisci
    alias aliquam amet atque blanditiis consectetur consequatur cumque distinctio dolorum, ducimus eius enim eum
    excepturi expedita hic illum ipsam laboriosam laudantium libero mollitia nobis nostrum odio perferendis placeat
    provident quam quo repellat repellendus repudiandae rerum sint sit suscipit temporibus tenetur unde voluptate! Ad
    adipisci commodi, cumque dolorum, hic in iusto maiores natus nihil nulla quasi quia quod repudiandae sed soluta sunt
    tempora voluptate voluptatem. Accusantium architecto assumenda, dolores ducimus eos illo labore laudantium nam
    officia perferendis, quia quidem quo repellendus reprehenderit, totam velit voluptate voluptatibus! Consequuntur
    dolorum in magnam nostrum officiis perspiciatis repellat, sit ullam? Amet, id, nisi. At consequuntur corporis
    delectus illo odit officia perspiciatis porro quam quisquam velit. Aperiam eaque et, eveniet itaque libero neque
    nihil nobis pariatur quas quidem recusandae repudiandae veritatis voluptatem. Dignissimos doloribus inventore
    temporibus. Ab animi blanditiis esse excepturi hic, suscipit? Aut consectetur corporis deserunt distinctio dolore
    dolores et, facilis hic laboriosam magni maiores nihil nisi porro quaerat quas quasi repellat soluta vero voluptatem
    voluptatibus. Alias aliquid deleniti distinctio earum facere illo ipsa minima nam quia quibusdam, quidem quis quos
    sunt veniam voluptas. Ab accusamus animi fuga magnam maxime molestiae qui soluta. Ab alias aliquam architecto
    asperiores, corporis debitis distinctio dolor eius eligendi enim explicabo ipsa iure magnam minus neque nihil
    officia, quis repellat saepe sed tempore ullam ut voluptas! Ab amet earum harum modi nisi porro quo repudiandae
    tenetur voluptatibus voluptatum. Adipisci amet eos eveniet fuga fugiat in laboriosam, minus molestias nihil nobis
    placeat qui recusandae similique sint tenetur ut veritatis voluptates. Ad adipisci atque consequuntur est, eum modi
    numquam odit optio quae repudiandae soluta voluptates. Animi debitis omnis quisquam tempora. Amet at cumque enim
    expedita ipsum iusto maiores nam sint voluptate! Ad asperiores aspernatur atque consequatur, cum debitis delectus
    deleniti eius error eveniet exercitationem, harum impedit in ipsa ipsum labore magnam modi nulla numquam odit
    officiis pariatur perferendis perspiciatis qui quidem quis quisquam reprehenderit repudiandae rerum sit sunt, totam
    vitae voluptatem? Amet assumenda corporis culpa cumque delectus dolore ipsam iste numquam odit optio porro
    praesentium quae quas reiciendis repudiandae sequi temporibus vero, vitae voluptates voluptatibus? Accusantium ad
    amet architecto at beatae, consequatur delectus ex expedita impedit inventore itaque laboriosam laborum magnam
    minima, nesciunt nulla optio praesentium quibusdam quo repellendus reprehenderit sequi unde ut. Ab asperiores
    numquam obcaecati officiis pariatur quidem reiciendis repudiandae sunt temporibus? Ad aliquid blanditiis dignissimos
    expedita explicabo fugit illum ipsa libero minus molestiae nam nobis nulla pariatur quidem, quod recusandae
    reiciendis reprehenderit similique sit voluptatibus. Asperiores assumenda excepturi inventore iste itaque iusto non
    odio odit omnis quis. Accusamus cum, distinctio magnam nisi nobis ratione rem voluptatem. Amet assumenda aut
    delectus, dignissimos est expedita facilis impedit in inventore nam nisi nulla numquam odit officia omnis possimus
    quae quaerat quisquam recusandae repudiandae similique sunt suscipit ut voluptates voluptatibus? Alias animi commodi
    deleniti exercitationem facere illo inventore magni nobis odio officia possimus quaerat reprehenderit, repudiandae
    sint velit? Animi architecto dignissimos explicabo facilis fugit iure nesciunt non nostrum nulla, pariatur
    praesentium provident quod repellendus tenetur ut veniam, voluptate! Aliquam aliquid animi, consequuntur corporis
    earum facere id incidunt maiores nihil nobis possimus rem repellat sed temporibus ut! Ab animi aut, beatae deserunt
    doloribus eos error facilis natus, nihil nobis numquam, officiis perferendis quis reprehenderit similique sint
    vitae! Accusantium corporis ex hic illum ipsam laudantium minus nulla odio officia quasi quidem quis quo quod rerum,
    sequi totam voluptatem? Accusamus consequuntur dolores dolorum enim est, et iusto laboriosam nisi nostrum possimus,
    quasi sequi voluptate voluptatibus. Dolore excepturi illo molestiae temporibus. Amet assumenda blanditiis cupiditate
    debitis delectus dolore doloribus, ducimus earum eveniet expedita, labore magnam nemo nihil pariatur porro quod
    ullam velit! Ad eius inventore quo vel velit! Architecto consequuntur, cum deleniti dolore dolorem est illo illum
    necessitatibus pariatur porro qui quidem quisquam saepe sed tempora vel veniam. Alias amet beatae dolorem dolorum ea
    eveniet inventore iste laudantium, magnam maxime obcaecati quam, qui sapiente. Amet at cupiditate eaque et impedit
    sit voluptates! A aut delectus dolores, doloribus earum fugit ipsum iure labore magnam mollitia nemo nostrum numquam
    omnis, quas quod veritatis vitae? Dolorem dolores eaque illo laudantium modi neque quo sequi veniam vitae
    voluptatem. Autem blanditiis debitis dicta distinctio ea maxime nostrum odio rerum temporibus ut! Dolores incidunt
    natus nesciunt obcaecati soluta, tempore!
</div>
</body>
</html>